<template>
  <div class="login-form">
    <h2 class="title">登录filorga</h2>
    <p v-if="errMsg" class="errMsg">{{errMsg}}</p>
    <yd-cell-group>
      <form ref="form" method="post" :action="loginUrl">
        <yd-cell-item>
          <input @change="handlePhoneNumberChange" v-model="form.phone" slot="right" type="tel" placeholder="请输入手机号" name="phone">
        </yd-cell-item>
        <yd-cell-item>
          <input v-model="form.code" slot="right" type="text" placeholder="验证码" name="code">
          <span @click.stop="handlePushCode" slot="right" style="display:block;padding:10px;">
            {{sendBtnText}}
          </span>
        </yd-cell-item>
        <input :value="form.openid" type="hidden"  name="openid">
        <input value="0" type="hidden"  name="type">
      </form>
    </yd-cell-group>
    <div>
      <!-- :disabled="isSubmitDisabled" -->
      <yd-button 
      @click.native="handleSubmit" 
      size="large" 
      bgcolor="#000" 
      color="#FFF">登 录</yd-button>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  data() {
    return {
      form: {
        phone: "",
        code: "",
        openid: "",
      },
      isSended: false,
      colding: 0,
      errMsg: "",
      phoneChangeFrag: false,
    };
  },
  methods: {
    handlePhoneNumberChange() {
      this.phoneChangeFrag = true;
    },
    handlePushCode() {
      if (!/^1\d{10}$/.test(this.form.phone)) {
        this.$dialog.toast({
          mes: "请输入正确的手机号",
        });
        return;
      }
      if (this.isSending) return;

      $.ajax({
        url: g.ctx + "/login/sendCode",
        type: "post",
        data: {
          phone: this.form.phone,
          type: "0",
        },
        dataType: "JSON",
        success: data => {
          if (data.result) {
            this.isSended = true;
            this.phoneChangeFrag = false;
            this.handleColding();
          } else {
            this.$dialog.toast({
              mes: data.message,
            });
          }
        },
        error: () => {
          this.$dialog.toast({
            mes: "验证码发送失败",
          });
        },
      });
    },

    handleColding() {
      this.colding = 60;
      this.timer = setInterval(() => {
        if (this.colding == 0) {
          clearInterval(this.timer);
          this.timer = null;
          return;
        }
        this.colding -= 1;
      }, 1000);
    },
    handleSubmit() {
      if (this.phoneChangeFrag) {
        this.$dialog.toast({
          mes: "手机号已改变，请重新发送验证码",
        });
        return;
      }
      if (!/^1\d{10}$/.test(this.form.phone)) {
        this.$dialog.toast({
          mes: "请输入正确的手机号",
        });
        return;
      }
      if (this.form.code.trim() == "") {
        this.$dialog.toast({
          mes: "请输入验证码",
        });
        return;
      }

      this.$refs["form"].submit();
    },
  },
  computed: {
    isSending() {
      return this.colding > 0;
    },
    sendBtnText() {
      if (this.colding == 0) {
        return "点击发送验证码";
      } else {
        return `${this.colding}秒后可重新发送`;
      }
    },
    loginUrl() {
      return g.ctx + "/login/loginUser1";
    },
    isSubmitDisabled() {
      return (
        !this.form.phone.trim() || !this.form.code.trim() || !this.isSended
      );
    },
  },
  created() {
    this.form.openid = window.openId;
    if (window.errMsg) {
      this.errMsg = window.errMsg;
    }
  },
};
</script>

<style>
.title {
  font-size: 24px;
  padding: 20px;
  text-align: center;
}
.login-form {
  padding: 30px 0 0;
}
.errMsg {
  color: rgb(167, 10, 10);
  padding: 10px;
}
</style>
